<template>
	<view class="content">
		<view class="nav">
			<view class="back" @click="back">
				<uni-icons type="back" :size="24" color="#333333"></uni-icons>
			</view>
			<view class="search-content">
				<view class="icon">
					<uni-icons type="search" :size="20" color="#D5D5D5"></uni-icons>
				</view>
				<input type="请输入" v-model="key" placeholder="请输入技师或用户姓名电话" placeholder-class="input-placeholder" @confirm="handleToSearch" />
				<view class="search-btn" @click="handleToSearch">搜索</view>
			</view>
			<uni-icons type="more-filled" color="#666" :size="24" @click="showRightPopup"></uni-icons>
		</view>

		<view class="table">
			<view class="th">
				<view class="u-th">姓名</view>
				<view class="u-th">年龄</view>
				<view class="u-th">佣金</view>
				<view class="u-th"></view>
				<view class="u-th"></view>
			</view>
			<view class="td" v-for="(item,index) in list" :key="index" :id="index == list.length-1 ? 'noborder' : ''">
				<view class="u-td">{{item.real_name}}</view>
				<view class="u-td">{{item.age}}</view>
				<view class="u-td">{{item.sharing_ratio}}%</view>
				<view class="u-td">
					<view class="jie-btn btn" @click="breakOff(item)">解约</view>
				</view>
				<view class="u-td">
					<view class="set-btn btn" @click="setYong(item)">设置佣金</view>
				</view>
			</view>
			
			
			<view class="no_more flex_c" v-if="!total">
				<image src="/static/index/mescroll-empty.png"></image>
				<text>~ 空空如也 ~</text>
			</view>
		</view>

		<u-modal v-model="show" show-cancel-button @confirm="dialogConfirm" :content="content"></u-modal>
		<u-modal v-model="show1" :title="'抽取技师佣金'" show-cancel-button @confirm="dialogInputConfirm">
			<view class="slot-content">
				<input type="number" v-model="sharing_ratio"
					:placeholder='"佣金比例,最大设置"+(100-Number(commission))' /><text>%</text>
			</view>
		</u-modal>

		<page-pagination :total="total" :numAround="true" :showBorder="true" :currentPage="page" :showPageSize="6"  v-if="total"
			@change="pageChange"></page-pagination>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				list: [],
				downOption: {
					auto: false
				},
				content: "是否全部解约？",
				inputValue: "",
				show: false,
				show1: false,
				curretItem: {
					technician_id: 0
				},
				sharing_ratio: '', //佣金
				commission: 0,

				page: 1,
				total: 0,
				key:'',
			}
		},
		onLoad() {
			this.getMoney()
			this.getList()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getMoney() {
				this.request.httpTokenRequest({
					url: "store.bank/getWithdrawable",
					method: "get"
				}, {}).then(res => {

					if (res.code == 0) {
						this.commission = res.data.commission
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {})

			},
			showRightPopup() {
				var that = this
				uni.showActionSheet({
					itemList: ['全部解约', '统一设置佣金'],
					success: function(res) {
						if (res.tapIndex == 0) {
							that.content = '是否全部解约？'
							that.show = true
							that.curretItem.technician_id = 0
						} else {
							that.show1 = true
							that.curretItem.technician_id = 0
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			dialogConfirm() { //确认
				this.jieyue()
			},
			dialogInputConfirm(e) {
				this.setYongjin()
			},
			downCallback() {
				this.list = []
				this.mescroll.resetUpScroll();
			},
			todetail(item) {
				uni.navigateTo({
					url: '/pages/technicianTeam/technician?id=' + item.technician_id + '&type=1'
				})
			},
			breakOff(item) {
				this.content = '是否解约该技师？'
				this.show = true
				this.curretItem = item
			},
			setYong(item) {
				this.sharing_ratio = ''
				this.show1 = true
				this.curretItem = item

			},
			jieyue(id) {
				let that = this
				this.request.httpTokenRequest({
					url: "store.team/rescindContract",
					method: "get"
				}, {
					technician_id: this.curretItem.technician_id
				}).then(res => {
					if (res.code == 0) {
						that.$util.msg(res.msg)
						that.getList()
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},
			sPositiveInteger(input) {
				// 去除字符串两边的空格
				input = input.trim();
				if (isNaN(Number(input))) {
					return false; // 如果不能转换成数字则返回false
				} else if (input < 0) {
					this.$util.msg("请输入正确的比例")
					return false; // 如果不是以非零开头且只包含数字的字符串则返回false
				} else if (input > (100 - Number(this.commission))) {
					var str = "不能超过" + (100 - Number(this.commission)) + "%"
					this.$util.msg(str)
					return false;
				} else {
					return true; // 其他情况都认定为正整数并返回true
				}
			},
			setYongjin() {
				if (this.sPositiveInteger(this.sharing_ratio)) {
					let that = this
					this.request.httpTokenRequest({
						url: "store.team/setSharingRatio",
						method: "post"
					}, {
						technician_id: this.curretItem.technician_id,
						sharing_ratio: this.sharing_ratio
					}).then(res => {
						if (res.code == 0) {
							that.$util.msg(res.msg)
							that.getList()
						} else {
							that.$util.msg(res.msg)
							return
						}
					}, error => {
						that.mescroll.endErr();
					})
				}

			},

			pageChange(e) {
				this.page = e
				this.getList()
			},
			/*上拉加载的回调*/
			getList() {
				let that = this
				this.request.httpTokenRequest({
					url: "store.team/index",
					method: "get"
				}, {
					page: this.page,
					key:this.key
				}).then(res => {
					this.key = ''
					if (res.code == 0) {
						this.total = res.data.total
						if(res.data.data.length){
							that.list = res.data.data
						}else {
							this.page --
							this.getList()
						}
					} else {
						that.$util.msg(res.msg)
						return
					}
				}, error => {
					that.mescroll.endErr();
				})
			},
		
			handleToSearch(){
				this.page = 1
				this.getList()
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx 0 30rpx;
		width: 100vw;
		background: #F5F7F8;
		z-index: 99;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		height: 90rpx;

		.search-content {
			width: 545rpx;
			display: flex;
			align-items: center;
			border-radius: 32rpx;
			border: 1rpx solid #D5D5D5;
			backdrop-filter: blur(10px);
			padding: 7rpx 10rpx 7rpx 23rpx;

			.icon {
				margin-right: 20rpx;
			}

			input {
				width: 68%;
			}

			.input-placeholder {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AEAEB0;
			}

			.search-btn {
				width: 103rpx !important;
				height: 50rpx;
				border-left: 1rpx solid #D5D5D5;
				font-size: 26rpx;
				line-height: 50rpx;
				text-align: center;
				color: #0F0807;
				font-family: PingFangSC, PingFang SC;
				margin-left: auto;
			}
		}

		.icon {
			display: flex;
			align-items: center;

			view {
				display: flex;
				align-items: center;
				flex-direction: column;
				margin-left: 30rpx;

				image {
					width: 22rpx;
					height: 24rpx;
				}

				text {
					font-size: 26rpx;
					color: #333333;
					line-height: 37rpx;
				}
			}
		}
	}

	.content {
		padding: calc(var(--status-bar-height) + 100rpx) 30rpx 20rpx;
	}

	.table {
		border-radius: 20rpx;
		overflow: hidden;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 4rpx 4rpx rgba(232, 232, 232, 0.5);
		margin-bottom: 37rpx;
	}

	.th {
		display: flex;
		background: #3393FF;
		padding: 20rpx 0;

		.u-th:nth-child(1) {
			width: 23%;
		}

		.u-th:nth-child(2) {
			width: 17%;
		}

		.u-th:nth-child(3) {
			width: 17%;
		}

		.u-th:nth-child(4) {
			width: 20%;
		}

		.u-th:nth-child(5) {
			width: 23%;
		}

		.u-th {
			text-align: center;
			font-weight: 600;
			font-size: 24rpx;
			color: #FFFFFF;
			line-height: 33rpx;
		}
	}

	#noborder {
		border-bottom: 1rpx solid transparent;
	}

	.td {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #D5D5D5;

		.u-td:nth-child(1) {
			width: 23%;
		}

		.u-td:nth-child(2) {
			width: 17%;
		}

		.u-td:nth-child(3) {
			width: 17%;
		}

		.u-td:nth-child(4) {
			width: 20%;
		}

		.u-td:nth-child(5) {
			width: 23%;
		}

		.u-td {
			text-align: center;
			font-size: 28rpx;
			color: #0F0807;
			line-height: 33rpx;

			.jie-btn {
				font-size: 28rpx;
				color: #FC0909;
				line-height: 40rpx;
			}

			.set-btn {
				font-size: 28rpx;
				color: #FCA209;
				line-height: 40rpx;
			}
		}
	}

	.slot-content {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 30rpx;

		input {
			font-size: 24rpx;
			height: 60rpx;
			text-align: center;

		}
	}

	.no_more {
		margin: 40rpx 0;
		image {
			width: 280rpx;
			height: 280rpx;
		}
		text {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: gray;
		}
	}

</style>